<template>
<div>
   <h1>page3</h1>
    <mt-cell title="下拉刷新&&无限滚动加载" ></mt-cell>
    <mt-loadmore :top-method="refreshData"  
     auto-Fill="false"  ref="loadmore"  style="height:300px;overflow-y:auto;">
      <ul v-infinite-scroll="loadMore"
       infinite-scroll-immediate-check = "false"
       infinite-scroll-disabled="loading"
       infinite-scroll-distance="20">
        <li v-for="item in list_data" :key="item">
              {{item}}
        </li>
        <li v-show="loading" style="line-height:25px;"><mt-spinner type="triple-bounce" ></mt-spinner>加载更多</li>
      </ul>
    </mt-loadmore>
</div>
</template>


<style>
</style>

<script>
let locallist = [];
export default {
  layout: "mobile",
  data() {
    return {
      list_data: locallist,
      loading: false
    };
  },

  created: function() {
    for (var i = 1; i < 20; i++) {
      this.list_data.push("title" + parseInt(i));
    }
  },
  methods: {
    loadMore() {
      var _self = this;
      _self.loading = true;
      var len = _self.list_data.length;
      setTimeout(function() {
        for (var i = 1; i < 10; i++) {
          _self.list_data.push("new" + parseInt(len + i));
        }
        _self.loading = false;
        _self.$refs.loadmore.onBottomLoaded();
      }, 3000);
    },
    refreshData() {
      var _t = this
      setTimeout(function() {
        _t.list_data.splice(0, _t.list_data.length);
        for (var i = 1; i < 20; i++) {
          _t.list_data.push("refresh title" + parseInt(i));
        }
        _t.$refs.loadmore.onTopLoaded();
      }, 2500);
    }
  }
};
</script>
